<template>
  <!-- 选择颜色组件 -->
  <!-- <choseColor></choseColor> -->
  <!-- 选择模特 -->
  <!-- <choseModel></choseModel> -->
  <el-form
    class="BaseForm"
    ref="form"
    :model="prompt"
    label-width="88px"
    label-position="left"
  >
    <div class="formContent">
      <div class="fullImgPickerWrap">
        <div class="boxWraper" style="position: relative" v-loading="computeing">
          <ImagePicker
            TipsTxt="请上传需要替换模特的图片"
            ToPlatform="No-ComfyUI"
            Width="100%"
            Height="100%"
            :DefaultImageUrl="imageUrl"
            :MarkImageUrl="markImageUrl"
            @change="ChangeModelImg"
            @clear="ClearModelImg"
            @imageClick="showEditPhotoDialog(2)"

            :KeyName="'image'"
            :UploadPath="uploadPath"
            :SuccessType="'New-ComfyUI'"
          >
            <div class="picker-tips" v-if="choseData.length==0 && !markImageUrl" @click="showEditPhotoDialog(2)">选择需要保留的内容</div>
          </ImagePicker>
          <div class="Magic_Wand" v-if="havaImg">
            <div class="Magic_Wand_top">
              <template v-for="(item, index) in choseData" :key="index">
                <div class="Magic_Wand_top_left" v-if="item && item.value == true">
                  {{ item.text }}<el-icon :size="18" class="no-inherit" @click="delSegmentClothTab(index)"><Close /></el-icon>
                </div>
              </template>
              <!-- <div class="Magic_Wand_top_left">
                鞋子<el-icon :size="18" class="no-inherit"><Close /></el-icon>
              </div> -->
            </div>
            <div class="Magic_Wand_bottom">
              <div>图片优化</div>
              <!-- <div class="pointer" @click="showEditPhotoDialog(4)">
                <el-icon :size="18" color="black"><MagicStick /></el-icon>
              </div> -->
              <div class="pointer" @click="showEditPhotoDialog(3)">
                <el-icon :size="18" color="black"><View /></el-icon>
              </div>
              <div class="pointer" @click="showEditPhotoDialog(5)">
                <el-icon :size="18" color="black"><Sort /></el-icon>
              </div>
              <div class="pointer" @click="showEditPhotoDialog(6)">
                <el-icon :size="18" color="black"><EditPen /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>   
      <div>
        <div class="StepTitle"><div class="txt">替换模特</div></div><!--  -->
        <div class="PalaceGridSession">
          <!--<div class="title model_style">-->
            <div class="title sessionTabBar">
            <div :class="!isUploadImg ? 'active' : ''" @click="isUploadImg = false">
              选择模特风格
            </div>
            <div :class="isUploadImg ? 'active' : ''" @click="isUploadImg = true" >
              选择模特脸图
            </div>
          </div>
          <PalaceGrid
            :modelList="modelList"
            :modelGroup="modelGroup"
            v-show="!isUploadImg"
            @selectModelStyle="onSelectModelStyle"
          ></PalaceGrid>
          <div class="boxWraper" v-show="isUploadImg">
            <ImagePicker
              TipsTxt="请上传需要替换模特的图片"
              ToPlatform="No-ComfyUI"
              @change="ChangeFacelImg"
              Width="308px"
              Height="308px"
              :DefaultImageUrl="imageModelUrl"

            :KeyName="'image'"
            :UploadPath="uploadPath"
            :SuccessType="'New-ComfyUI'"
          ></ImagePicker>
        </div>
        <div class="tip">仅选择模特的风格类型，最终人脸将进行AI生成</div>
        </div>
        <div class="StepTitle"><div class="txt">选择场景</div></div>
        <div class="PalaceGridSession">
          <PalaceGrid :sceneList="sceneList" @selectScene="onSelectScene"></PalaceGrid>
        </div>
      </div>
    </div>
    <div class="formBottomBar">
      <div class="content" @click="gotoChoseModel">
        <div class="tips">精选案例<br />没有灵感？逛逛精选案例，模板一件复用。</div>
      </div>
      <el-button round class="FormBtn" @click="onSubmit" v-loading="nowLoading">
        <el-icon class="icon"><Brush />
        </el-icon><span class="txt">生成图片</span>
      </el-button>
    </div>
    <el-dialog
    v-model="dialogVisible"
    width="800"
    :before-close="handleClose"
    top="10vh"
      :show-close="false"
      :destroy-on-close="false"
      :style="{ minWidth: '800px', left: '102px' }"
      :z-index="3002"
  >
 <div class="choseModel-box">
  <choseModel></choseModel>
  
 </div>
 <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <el-dialog
      class="editphoto-dialog"
      v-model="showEditPhoto"
      top="10vh"
      :show-close="false"
      :destroy-on-close="false"
      :style="{ minWidth: '800px', left: '102px' }"
      :z-index="3002"
    >
      <EditPhoto
        ref="editPhoto"
        :src="baseImage"
        :model="editPhotoTab"
        :computeing="computeing"
        :clothData="choseData"
        @comfirm="onEditComfirm"
        @changeTab="onEditTabChange"
        @eraseClick="eraseClick"
        @repairClick="repairClick"
      />
    </el-dialog>
  </el-form>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/* 大屏幕设备 */
@media screen and (min-width: 1920px) {
  .model_style {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .model_style {
    margin-top: 36px;
    margin-bottom: 36px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .model_style {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* （1024px - 1279px） */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .model_style {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .tip {
    font-size: 12px;
  }
}
.choseModel-box{
  height: 600px;
}
.active {
  border-bottom: 2px solid #02a7f0;
}
.BaseForm .formContent {
  padding-bottom: 18px;
}
.BaseForm .formContent .fullImgPickerWrap > .boxWraper {
  padding: 0;
  overflow: hidden;
}
.no-inherit {
  font-size: 16px;
  position: absolute;
  top: 3px;
  cursor: pointer;
}
.PalaceGridSession{
  background: #f9f9f9;
  border-radius: 0 18px 18px 18px;
  padding: 0;
  .sessionTabBar{
    display: flex;
    background: #fff;
    padding: 0;
    background:#f2f2f2;
    border-radius: 18px 18px 0 0;
    div{
      flex: 1;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 18px 18px 0 0;
      font-size: 14px;
      font-weight: normal;
      color: #999;
    }
    .active{
      font-weight: bold;
      color: #333;
      background: #f9f9f9;
      border: none;
    }
  }
  .boxWraper{
    padding: 18px;
  }
}
.Magic_Wand {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  flex-direction: column;
  z-index: 9;
  .Magic_Wand_top {
    display: flex;
    flex-wrap: wrap;
    .Magic_Wand_top_left,
    .Magic_Wand_top_right {
      // padding: 0px 20px 0 13px;
      // padding-right: 26px;
      // background: rebeccapurple;
      // color: white;
      // border-radius: 20px;
      // font-size: 12px;
      // line-height: 24px;
      // margin-bottom: 10px;
      // margin-left: 4px;
      // position: relative;
      padding: 0px 6px 0 9px;
      padding-right: 26px;
      background: rebeccapurple;
      color: white;
      border-radius: 20px;
      font-size: 12px;
      line-height: 24px;
      margin-bottom: 10px;
      margin-left: 4px;
      position: relative;
      margin-right: 4px;
    }
  }
  .Magic_Wand_bottom {
    display: flex;
    padding: 4px 0 2px 10px;
    background: #b3b3b3;
    font-size: 12px;
    color: white;
    border-top-right-radius: 27px;
    align-items: center;
    justify-content: space-around;
    max-width: 180px;
    > div {
      margin-right: 10px;
      i {
        padding: 4px;
        background: white;
        border-radius: 50%;
      }
    }
  }
}
.formContent {
  //display: flex;
}
.formContent > div {
  flex: 1;
}
.BaseForm .formContent .fullImgPickerWrap {
  //height: 95%;
  height: 360px;
  padding: 0;
  .boxWraper {
    padding: 0;
    overflow: hidden;
  }
}
.el-form-item__content {
  margin-left: 0;
  width: 100%;
  height: 100%;
}
.title {
  font-weight: 600;
  text-align: left;
  padding-left: 20px;
}
.model_style {
  /* margin-top: 2em;
  margin-bottom: 1em; */
  display: flex;
}

.model_style > div {
  margin-right: 1em;
}
.tip {
  font-size: 12px;
  color: #999;
  text-align: left;
  padding: 0 18px 24px 18px;
}

.pointer {
  cursor: pointer;
}

/** 图片编辑弹窗 */
.editphoto-dialog .el-dialog__header {
  padding-bottom: 0;
}

/** 图片未操作提示 */
.picker-tips {
  position: absolute;
  z-index: 10;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
}
</style>
<script>
import { ElNotification } from 'element-plus'
import WebAPI from '@/unit/api';
import WebRequest from "../../unit/request.js";
import PromptSession from "../element/PromptSession.vue";
import ImagePicker from "../element/ImagePicker.vue";
import LilithChat from "../element/LilithChat.vue";
import PalaceGrid from "../element/PalaceGrid.vue";
import EditPhoto from "../element/EditPhoto";
import OS from "../../unit/OS.js";
import mergeMark from "../../unit/mergeMark.js";
import { ref, toRaw } from "vue";
import choseColor from '@/components/choseColor'
import choseModel from '@/components/choseModel'
export default {
  name: "Staging",
  components: { PromptSession, ImagePicker, LilithChat, PalaceGrid, EditPhoto, choseColor, choseModel },
  props: {
    src: "",
    title: "",
    date: "",
    imageUrl: "",
    sourceImageDepotId: "",
  },
  data() {
    return {
      $notification : ElNotification,
      canvasWidth: 400, // 设置Canvas宽度
      canvasHeight: 300, // 设置Canvas高度
      imageSrcs: ['image1.jpg', 'image2.jpg', 'image3.jpg'], // 图片路径数组
      prompt: {
        txt: "",
        sessionData: [],
      },
      dialogVisible : false,//是否展示选择模型的模态框
      choseData: [], //上传图片后编辑选择的数据
      responseImgName:null,//返回的图片数据
      havaImg: false, //是否选中图片
      promptSetting: null,
      isLoadingPrompt: false,
      nowTab: "",
      nowLoading: false,
      sourceImageDepotIdVal: "",
      baseImage: "",
      promptSetting: [],
      isUploadImg: false, //使用自己上传的图片
      choseImgUrl:null,//选中的图片路径
      choseImgWidth:0,//选中的图片宽度
      choseImgHeight:0,//选中的图片高度
      showEditPhoto: false, // 显示图片编辑弹窗
      editPhotoTab: 2, // 当前展示的图片编辑模块tab
      computeing: false, // 算力计算中，右下角的按钮计算中状态
      showImageUrl:null,//修改后的图片地址
      markImageUrl: null, // 展示用遮罩图片（不参与图片生成）
      computeing: null, // 图片加载中或计算中

      imageModelUrl: '',  // 模特图片路径

      // 素材类图片数据
      modelList: [], //风格第一选项
      modelGroup: [], //风格第二选项
      sceneList: [], //场景列表

      // 上传路径
      uploadPath: WebAPI.ComfyUi.UploadImage,

      // 提交用参数
      faceModelImageName: '',           // 脸部模特图片
      modelGroupId: '001',              // 模特风格ID：模特风格下，传模特ID
      modelImageName: '',               // 模特图片：用户上传本地图片后，传图片名称
      mattingMainBodyImageName: '',     // 身体图片
      mattingClothesImageName: '',      // 模特抠图后的照片，比如模特和服饰分割后的结果图
      backgroundReferenceImageName: '',  // 场景图片

      // 校验规则
      verify: [
        { key: 'modelGroupId', empty: true, tip: '' },
        { key: 'modelImageName', empty: false, tip: '请选择或上传模特图片' },
        { key: 'faceModelImageName', empty: true, tip: '请选择或上传脸模图片' },
        { key: 'mattingMainBodyImageName', empty: true, tip: '' },
        { key: 'mattingClothesImageName', empty: false, tip: '没有对模特进行选区涂抹' },
        { key: 'backgroundReferenceImageName', empty: false, tip: '没有选择场景' },
      ],
    };
  },
  mounted() {
    // console.log(this.sceneList, "sceneList");
    if (this.promptSetting == null && !this.isLoadingPrompt)
      this.isLoadingPrompt = true;
    
    WebRequest.GetSelecterSetting({
      callback: (res) => {
        if (res.status == 200 && res.data.errCode == 10000) {
          this.promptSetting = JSON.parse(res.data.data);
          this.nowTab = this.promptSetting.tabList[0].tabId;
          // console.log(this.promptSetting);
          this.isLoadingPrompt = false;
        } else {
          this.promptSetting = null;
          this.isLoadingPrompt = false;
        }
      },
    });

    // 获取模特和场景图片
    this.getMaterialData()
  },
  methods: {
    async sendImgtoSD(){
     
    },

    // 校验数据
    verifyData() {
      let errorNum = 0
      for (let i = 0; i < this.verify.length; i++) {
        const e = this.verify[i]
        const val = this[e.key]
        if ((!val || val=='') && !e.empty) {
          setTimeout(() => {
            ElNotification({ type: 'error', message: e.tip })
          }, 300 * errorNum)
          errorNum++
        }
      }
      return errorNum == 0
    },

    gotoChoseModel(){
      this.dialogVisible = true
    },

    // 点击生成图片
    async onSubmit(e) {
      let parm = {
        faceModelImageName: this.faceModelImageName,
        modelGroupId: '001', 
        modelImageName: this.modelImageName,
        mattingMainBodyImageName: this.mattingMainBodyImageName,
        mattingClothesImageName: this.mattingClothesImageName,
        backgroundReferenceImageName: this.backgroundReferenceImageName
      }

      // 校验数据
      if (!this.verifyData()) {
        return
      }

      // 循环上传图片获取图片名称
      let isError = false
      for (const k in parm) {
        let url = parm[k]
        if (url.indexOf('http') > -1) {
          let data = await WebRequest.ComfyUi.UploadImage({ imageUrl: url })
          if (data.status == 200) {
            parm[k] = data.data.name
          } else {
            this.isError = true
            this.$message({ type: 'error', message: '图片上传失败，请重试' })
            break
          }
        }
      }
      if (isError) return
      this.nowLoading = true
      this.$emit("startGenerate");

      // return
      let result = await WebRequest.ComfyUi.ChangeModelBackgroundImage(parm).catch(err => {
        this.$message({ type: 'error', message: '图片生成失败，请重试' })
        console.error(err)
      })

      // 图片成功返回，准备下载
      if (result && result.status == 200) {
        let data = result.data
        let fileNames = data.filenames
        if (fileNames && fileNames.length > 0) {
          // 下载图片链接
          let imgData = await WebRequest.ComfyUi.DownloadImage({ fileName: fileNames[0] }).catch(err => {
            this.$message({ type: 'error', message: '图片生成失败，请重试' })
            console.error(err)
          })
          // console.log(imgData)
          if (imgData && imgData.status == 200) {
            this.showImageUrl = imgData.data.pic_url
            this.$emit('ResultCalled', this.showImageUrl)
          }
          this.nowLoading = false
        }
      } else {
        this.nowLoading = false
      }
    },

    promptTips() {
      var tips = [
        "例：一个穿着白色长裙的漂亮女孩，站在咖啡店门口，枫叶在飘落，日落，电影风格",
        "例：一个美丽的上海女人，特写，王家卫电影风格",
        "例：一个可爱的小女孩在吃着雪糕，背景是儿童乐园，由彩色的气球，皮克斯动画风格",
        "例：夜晚的酒吧街，两边是冷光的霓虹灯，一对情侣牵手走在路上。",
      ];
      var random = Math.floor(Math.random() * tips.length);
      if (random >= tips.length) {
        random = 0;
      }
      return tips[random];
    },
    // changePromptTab(e) {
    //   console.log(e);
    // },
    // sessionDataChange(e) {
    //   var newSession = true;
    //   for (var i = 0; i < this.prompt.sessionData.length; i++) {
    //     if (this.prompt.sessionData[i].groupId == e.groupId) {
    //       this.prompt.sessionData[i] = JSON.parse(JSON.stringify(e));
    //       newSession = false;
    //     }
    //   }
    //   if (newSession) {
    //     this.prompt.sessionData.push(e);
    //   }
    // },

    // 变更图片
    async ChangeModelImg(e) {
      // console.log('imageUrl:', e)

      // 手动上传图片时操作
      if(e.fileName && e.fileName != null && e.fileName != ''){
        // 设置上传参数
        this.modelImageName = e.fileName
        return
      }

      // 判断是否存在图片
      if (!e.fileName && e.imageUrl == "" && !e.sourceImageDepotId) {
        this.havaImg = false;
      } else {
        this.havaImg = true;
        this.ChangeModelImgReset()
      }
      if (e.fileName && e.fileName != null && e.fileName != "") {
        this.baseImage = e.fileName;
      } else {
        this.baseImage = e.imageUrl;
      }

      // 选择图库图片时操作
      this.choseImgUrl = e.imageUrl
      // 获取图片尺寸
      if (typeof e.imageUrl == 'string') {
        let img = new Image()
        img.setAttribute('crossOrigin', 'anonymous')
        img.src = this.choseImgUrl
        img.onload = () => {
          this.choseImgWidth = img.width
          this.choseImgHeight = img.height
        }
      }

      // 直接选择图库图片时的处理
      if(this.choseImgUrl){
        let data = await WebRequest.ComfyUi.UploadImage({ imageUrl: this.choseImgUrl }).catch(err => {
          this.$message({type: 'error', message: '图片无法上传！'})
        })
        if (!data) return
        
        this.responseImgName = data.data.name
        // 设置上传参数
        this.modelImageName = data.data.name
      }

      // console.log("ResultcalledResultcalled");
      this.$emit(
        "ResultCalled",
        "https://picture.2beauti.com/prometheus/20240385/1711357351157.png"
      );
      this.$emit("startGenerate");
    },

    // 变更图片后：重置相关数据
    ChangeModelImgReset() {
      // 清除涂抹遮罩
      this.markImageUrl = ''
      this.mattingClothesImageName = ''
      let list = []
      for (let i = 0; i < this.choseData.length; i++) {
        this.choseData[i].value = false
        list.push(this.choseData[i])
      }
      this.choseData = list
      // 清除保留选取区域参数
      setTimeout(() => {
        this.choseData = []
      }, 300)
    },

    // 点击清除图片
    ClearModelImg() {
      this.ChangeModelImgReset()
    },

    // 上传的模特图片：设置模特图片名称参数
    async ChangeFacelImg(e) {
      // console.log('imageUrl:', e)
      // 主动上传图片时的处理
      if(e.fileName && e.fileName != null && e.fileName != ''){
        this.faceModelImageName = e.fileName
        let urlData = await WebRequest.ComfyUi.DownloadImage({ fileName: this.modelImageName }).catch(err=>{
          console.log('下载图片失败：', err)
        })
        if (urlData.pic_url) {
          this.imageModelUrl = urlData.pic_url
        } else {
          console.log('下载图片失败!', this.modelImageName)
        }
      } 
      // 选择图库时的处理
      else if (e.imageUrl) {
        this.imageModelUrl = e.imageUrl
        let data = await WebRequest.ComfyUi.UploadImage({ imageUrl: this.choseImgUrl }).catch(err => {
          this.$message({type: 'error', message: '图片无法上传！'})
        })
        if (!data) return

        // 设置上传参数
        this.faceModelImageName = data.data.name
      }
    },

    // 选中场景值：设置背景参数
    onSelectScene(e) {
      this.backgroundReferenceImageName = e.imgUrl
    },

    // 选中模特风格：设置模特风格ID参数
    onSelectModelStyle(e) {
      this.modelGroupId = e.modelGroupId
    },

    // 获取上传后的图片名称
    getUploadImageName(markImageUrl, ) {
      return new Promise((resolve, reject) => {
        // 上传base64图片到oss换取oss地址
        WebRequest.UploadImageDataToOss({
          picBase64: markImageUrl,
          callback: async (imgRes) => {
            let markImage = imgRes.data.data
            try {
              let maskData = await WebRequest.ComfyUi.UploadImage({ imageUrl: markImage })
              if (maskData && maskData.status == 200) {
                let maskName = maskData.data.name
                resolve(maskName)
              } else {
                reject('图片上传失败')
              }
            } catch (error) {
              reject(error)
            }
          },
          error: (e) => {
            reject(e)
          }
        })
      })
    },

    // 删除保留区域的tab
    delSegmentClothTab(index) {
      this.choseData[index].value = false
      let list = []
      for (let i = 0; i < this.choseData.length; i++) {
        list.push(this.choseData[i])
      }
      this.choseData = list
      this.$refs['editPhoto'].comfirm()
    },

    // 获取遮罩图：涂抹保留
    async getMarkImage(markImageUrl) {
      if (this.computeing) return
      this.computeing = true
      try {
        let maskName = await this.getUploadImageName(markImageUrl)
        let jobData = await WebRequest.ALi.InteractiveScribbleSegmentation({
          imageUrl: this.responseImgName,
          maskImageUrl: maskName,
        })
        if (jobData.status == 200) {
          let url = jobData.data.ResultUrl
          let imgBase64 = 'data:image/png;base64,' + jobData.data.image_base64
          // console.log(imgBase64)
          // 合成成功，上传图片获取名称，添加到遮罩数据中
          let maskData = await WebRequest.ComfyUi.UploadImage({ imageUrl: url })
          if (maskData.status == 200) {
            this.mattingClothesImageName = maskData.data.name
          }
          // 图片处理并设置展示用遮罩图
          this.markImageUrl = await mergeMark.hollowOut(url)
          this.computeing = false
        } else {
          this.computeing = false
          this.$message({ type: 'error', message: '获取任务错误' })
        }
      } catch (error) {
        this.computeing = false
        console.log(error)
      }
    },

    // 获取遮罩图：保留区域 - 服装分割
    async getSegmentClothMark(namesArray) {
      if (!namesArray || namesArray.length == 0 || this.computeing) return
      this.computeing = true

      let clothClass = namesArray.join(',')
      try {
        let cutoutData = await WebRequest.ALi.SegmentCloth({
          imageUrl: this.responseImgName,
          clothClass
        })
        let elements = cutoutData.data.Elements
        let ClassUrl = elements[1].ClassUrl || {}
        let markList = []
        for (const k in ClassUrl) {
          markList.push(ClassUrl[k])
        }
        mergeMark.mergeMark({
          width: this.choseImgWidth,
          height: this.choseImgHeight,
          images: markList,
          type: 'base64',
          canNotImages: true,
          success: async (mark) => {
            try {
              // 合成成功，上传图片获取名称，添加到遮罩数据中
              this.mattingClothesImageName = await this.getUploadImageName(mark)

              // 图片处理并设置展示用遮罩图
              this.markImageUrl = await mergeMark.hollowOut(mark)
              this.computeing = false
            } catch (error) {
              this.computeing = false
              this.$message({ type: 'error', message: '图片处理失败，请重试' })
              console.log(error)
            }
          },
          fail: (err) => {
            this.computeing = false
            this.$message({ type: 'error', message: '操作失败，请重试' })
          }
        })
      } catch (error) {
        this.computeing = false
        this.$message({ type: 'error', message: '操作失败，请重试' })
        console.log(error)
      }
    },

    

    /** 展示图片编辑弹窗 */
    showEditPhotoDialog(tab) {
      this.editPhotoTab = tab;
      this.showEditPhoto = true;
    },

    /** 图片编辑弹窗点击完成 */
    onEditComfirm(e) {
      let tab = this.editPhotoTab
      // 根据tab分别获取对应参数
      // console.log(this.editPhotoTab, e)
      // tab: 保留部分
      if (tab == 1 && e.data) {
        this.choseData = e.data || []
        let namesArray = []
        this.choseData.forEach(e => {
          if (e.value==true) {
            namesArray.push(e.name)
          }
        })
        // console.log(namesArray)
        this.getSegmentClothMark(namesArray)
      }
      // tab: 涂抹保留
      else if (tab == 2) {
        this.ChangeModelImgReset()
        this.markImageUrl = e.original
        this.getMarkImage(e.mark)
      }

      this.showEditPhoto = false;
    },

    /** 点击涂抹 */
    eraseClick(data) {
      // console.log("涂抹按钮：", data);
      if (this.computeing) {
        return;
      }
      // 模拟计算中
      this.computeing = true;
      setTimeout(() => {
        this.computeing = false;
      }, 3000);
    },

    /** 点击还原 */
    repairClick(data) {
      // console.log("还原按钮：", data);
      if (this.computeing) {
        return;
      }
      // 模拟计算中
      this.computeing = true;
      setTimeout(() => {
        this.computeing = false;
      }, 3000);
    },

    /** 图片编辑区变更tab */
    onEditTabChange(tab) {
      this.editPhotoTab = tab
      // console.log('变更tab',tab)
    },

    /** 获取素材类图片 */
    async getMaterialData() {
      // 获取模特图片
      let model = await WebRequest.Image.getModel()
      // 获取场景图片
      let scene = await WebRequest.Image.getScene()
      // 获取模特风格图
      let modelGroup = await WebRequest.Image.getModelGroup()

      // 组合数据：场景
      if (scene && scene.status == 200) {
        let sceneList = []
        scene.data.forEach(e => sceneList = sceneList.concat(e.list))
        this.sceneList = sceneList
      }

      // 组合数据：模特
      if (model && model.status == 200) {
        this.modelList = model.data
      }

      // 组合数据：模特风格
      if (modelGroup && modelGroup.status == 200) {
        this.modelGroup = modelGroup.data
      }
    },
  },
};
</script>
